/* Styles de la page */
		body {
		font-family: Calibri, sans-serif;
		margin: 0;
		padding: 0;
}

/* Corps de la page */
		header {
		display: flex;
		align-items: center;
		padding: auto;
		background: linear-gradient(to right, #3c5e9c, #091936);
		width: 100%;
		flex-wrap: wrap;
		}

/* Image de l'en-tête de la page */
		header img.profile-photo {
		width: 50px;
		height: 50px;
		border-radius: 20%;
		margin-left: 20px;
		}

/* En-tête de la page 2 */
		header nav {
		margin-left: auto;
		}

/* En-tête de la page 3 */
		header nav ul {
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		flex-wrap: wrap;
		}

/* Texte de l'en-tête de la page */
		header nav ul li {
		margin-right: 30px;
		}

/* Décoration du texte de l'en-tête de la page 3 */
		header nav ul li a {
		text-decoration: none;
		color: #000;
		}

/* Corps de la partie blanche */
		.section {
		padding: 60px 20px;
		text-align: center;
		background: radial-gradient(circle, #FFFFFF 0%, #EEEEEE 100%);
		}

/* Corps de la partie grise */
		.section.bg-grey {
		background: linear-gradient(to right, #3c5e9c, #091936);
		}

/* Images de la partie blanche */
		.section img.main-photo {
		width: 280px;
		border-radius: 20%;
		max-width: 280px;
		}

/* Boutons */
		.section .buttons {
		margin-top: 20px;
		}

/* Décorations des Boutons */
		.section .buttons button {
		margin: 0 10px;
		padding: 10px 20px;
		border: 20;
		border-radius: 50px;
		background: linear-gradient(to right, #3c5e9c, #091936);
		color: white;
		}

/* Placement de la partie grise */
		.section.bg-grey .content {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		}

/* Images de la partie grise */
		.section.bg-grey img.profile-photo-left {
		width: 50%;
		border-radius: 55%;
		margin-bottom: 20px;
		max-width: 400px;
		}

/* Compétences */
		#competences img {
		max-width: 31%;
		height: auto; /
		margin: 1%;
		}

/* Cadres des projets */
		.grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20px;
		margin: 20px 0;
		}

/* Cadres des projets 2 */
		.grid-item {
		background-color: #fff;
		padding: 20px;
		border: 3px solid #3c5e9c;
		border-radius: 20px;
		background-image: url("../images/fond.png"); /* change fond.png par ton image */
		background-size: cover;        /* l’image remplit le cadre */
		background-position: center;   /* centrée */
		background-repeat: no-repeat;  /* pas de répétition */
		}

/* Images des cadres des projets */
		.grid-item img {
		max-width: 100%;
		height: auto; 
		object-fit: cover; 
		width: 100%;
		height: 290px; 
		border-radius: 15px;
		}

/* Liens des projets */
		a {
		color: #091936;
		text-decoration: none;
		font-weight: bold;
}

/* Liens des projets après séléction */
		a:hover {
		color: #3c5e9c;
		text-decoration: none;
		font-weight: bold;
		}

/* Footer */	
		footer {
		text-align: center;
		padding: 10px 0;
		background: linear-gradient(to right, #3c5e9c, #091936);
		}

/* Responsivité */
		@media (max-width: 768px) 
		{
		header {
        flex-direction: column;
        align-items: flex-start;
		}

		header nav {
        margin-left: 0;
		}

		header nav ul {
        flex-direction: column;
        align-items: flex-start;
		}

		header nav ul li {
        margin-left: 0;
        margin-top: 10px;
		}

		.grid-container {
        grid-template-columns: 1fr;
		}

		#competences img {
        max-width: 100%;
        margin: 10px 0;
		}

		.section.bg-grey .content {
        flex-direction: column;
        align-items: center;
		}
		}

		@media (max-width: 480px) 
		{
		header img.profile-photo {
        width: 40px;
        height: 40px;
        margin-left: 10px;
		}

		.section img.main-photo {
        width: 100%;
        max-width: 200px;
		}

		.section.bg-grey img.profile-photo-left {
        width: 100%;
        max-width: 300px;
		}

		.section .buttons button {
        padding: 5px 10px;
        font-size: 14px;
		}
	
		.grid-item img {
        height: 200px;
		}
		
/* Version PC */	
/* Bouton menu (invisible par défaut) */
		.menu-toggle {
		display: none;
		font-size: 34px;
		background: none;
		color: white;
		border: none;
		cursor: pointer;
		}

/* Menu mobile caché par défaut */
		.mobile-menu ul {
		display: flex;
		gap: 20px;
		}
		}

/* Version mobile */
		@media (max-width: 768px) {
	
/* Centrage vertical parfait */
		.menu-toggle {
		top: 50%;
		transform: translateY(-50%);
		z-index: 1000;
		font-size: 40px;
		background: none;
		color: white;
		border: none;
		cursor: pointer;
		}

/* Le bouton MENU devient visible */
		.menu-toggle {
		display: block;
		position: absolute;
		right: 20px;
		top: 20px;
		z-index: 1000;
		text-align: right;
		align-items: flex-end;
		}

/* Le MENU disparaît */
		.mobile-menu ul {
		display: none;
		flex-direction: column;
		background-color: none;
		padding: 20px;
		border-radius: 10px;
		}

/* Quand le menu est ouvert */
		.mobile-menu.open ul {
		display: flex;
		}
		}